<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同签订时间:" prop="contractStartTime">
            <el-date-picker v-model="model.contractStartTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择" @change="contractStartTimeChange" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同到期时间:">
            <el-date-picker v-model="model.contractEndTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions1" placeholder="请选择" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="drawer-footer">
      <div class="drawer-footer-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      model: {}
    }
  },
  computed: {
    // 限制 合同到期时间  只能选择  合同签订时间 之后的日子
    pickerOptions1() {
      const startTime = this.model.contractStartTime
      return {
        disabledDate(time) {
          if (!startTime) {
            return false
          }
          const startDate = new Date(startTime)
          return time.getTime() < startDate.getTime()
        }
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    contractStartTimeChange(e) {
      if (e) {
        this.model.contractEndTime = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
